import React, { useState, useReducer } from "react";

// useState方法 受控表单
// function FormInput() {
//   const [ values, setValues ] = useState({
//     user: '',
//     pwd: '',
//   });

//   console.log(values);

//   return (
//     <div>
//       <input
//         type="text"
//         placeholder="请输入同户名"
//         value={values.user}
//         onChange={e => setValues({ ...values, user: e.target.value })}
//       />
//       <input
//         type="password"
//         placeholder="请输入密码"
//         value={values.pwd}
//         onChange={e => setValues({ ...values, pwd: e.target.value })}
//       />
//       <button>提交</button>
//     </div>
//   );
// }

//useReducer方法 受控表单
const formReducer = (state, action) => {
  return {
    ...state,
    ...action,
  }
}

function FormInput() {

  const [values, dispatch] = useReducer(formReducer, {
    user: '',
    pwd: '',
  });

  console.log(values);

  return (
    <div>
      <input
        type="text"
        placeholder="请输入同户名"
        value={values.user}
        onChange={ e => dispatch({ user: e.target.value })}
      />
      <input
        type="password"
        placeholder="请输入密码"
        value={values.pwd}
        onChange={ e => dispatch({ pwd: e.target.value })}
      />
      <button>提交</button>
    </div>
  );
}

export default FormInput;
